<!-- 提现记录 -->
<template>
	<view class="container">
		<view class="com-detail">
			<u-tabs-swiper
				ref="uTabs"
				:bar-style="barStyle"
				:fontSize="tabOptions['font-size']"
				:activeColor="tabOptions['active-color']"
				:inactiveColor="tabOptions['inactive-color']"
				:barWidth="tabOptions['bar-width']"
				:bgColor="tabOptions['bg-color']"
				:gutter="tabOptions.gutter"
				:list="list"
				:current="current"
				@change="tabsChange"
				:is-scroll="false"
				swiperWidth="750"
			/>

			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(tab, index) in list" :key="index">
					<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
						<view class="content">
							<view class="receive-item" v-for="(item, index) in dataList" :key="index">
								<view class="title">{{ item.title }}</view>
								<view class="content-text">{{ item.content }}</view>
							</view>
							<!-- <view style="text-align: center; margin-top: 30rpx" v-if="dataList.length == 0">暂无数据</view> -->
							<view v-if="dataList.length == 0" style="width: 100%; text-align: center; margin-top: 200rpx">
								<image
									style="width: 500rpx"
									mode="widthFix"
									src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
								/>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import { getGuidanceInfo, getScriptList } from '@/api/yanxue/user'
export default {
	data() {
		return {
			current: 0,
			swiperCurrent: 0,
			list: [
				{
					name: '指导建议'
				},
				{
					name: '便捷话语库'
				}
			],
			tabOptions: {
				'font-size': 26,
				'active-color': '#000',
				'inactive-color': '#000',
				'bar-width': 106,
				'bg-color': '#fff',
				gutter: 110
			},
			barStyle: {
				'background-color': '#F95513'
			},
			dataList: [
				// {
				//   title: "· 行程是固定的吗？",
				//   content:
				//     "如遇部分课程因天气环境恶劣情况下,将根据实际情况,调整课程先后顺 序,尽可能保证研学内容不发生改变,以孩子的安全为主,敬请各位",
				// },
				// {
				//   title: "· 费用包含哪些，有无额外费用？",
				//   content:
				//     "费用中包含食宿,行车（除往返大交通）,保险费,课时费,教材费,团队装备 等基本费用。不包含其他个人消费:研学行程中因个人原因造",
				// },
				// {
				//   title: "· 报名后可退费吗？",
				//   content: "报名后不子退费。如果因有事情来不了,费用可以转到下一期,以至于消除 为止。",
				// },
				// {
				//   title: "· 家长说考虑考虑？",
				//   content: "请问家长您考虑哪一块，自然为师美育研学毕竟这方面比较专业，您说 出来可能我还能帮您解决?",
				// },
			]
		}
	},
	onLoad() {
		this.getData()
	},
	methods: {
		getData() {
			//   let API = getGuidanceInfo;
			//   if (this.current == 1) {
			let API = getScriptList
			//   }
			API().then(res => {
				this.dataList = res.result.list.filter(x => x.type != this.current)
			})
		},
		tabsChange(index) {
			this.swiperCurrent = index
		},

		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx
			this.$refs.uTabs.setDx(dx)
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current
			this.$refs.uTabs.setFinishCurrent(current)
			this.swiperCurrent = current
			this.current = current
			this.dataList = []
			this.getData()
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: calc(100vh - 88rpx);
	background: linear-gradient(0deg, #c1f26c 0%, #ffffff 100%);
	padding-top: 20rpx;
	overflow: hidden;
}

.com-detail {
	width: 702rpx;
	height: calc(100vh - 126rpx);
	background: #ffffff;
	box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
	border-radius: 48rpx;
	overflow: hidden;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	position: fixed;
	left: 24rpx;

	// margin-top: 26rpx;
	.swiper-box {
		flex: 1;

		.swiper-item {
			.content {
				width: 648rpx;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(52, 52, 52, 0.2);
				border-radius: 20rpx;
				margin: 0 auto;
				padding: 44rpx 30rpx 44rpx 22rpx;
				margin-top: 36rpx;
				position: absolute;
				left: 24rpx;

				.receive-item {
					margin-bottom: 58rpx;

					.title {
						font-family: HarmonyOS Sans SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #000000;
						line-height: 36rpx;
					}

					.content-text {
						margin-top: 44rpx;
						font-size: 28rpx;
						color: #666666;
						font-family: HarmonyOS Sans SC;
						font-weight: 400;
					}
				}
			}
		}
	}
}
</style>
